<template>
  <div>
    <div
      v-empty="!crm.leads.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container"
    >
      <!-- 场景+高级筛选 -->
      <c-r-m-new-head
        ref="crmTableHead"
        :crm-type="crmType"
        :sort-data="sortData"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"
        @on-export="exportInfos"
        @on-search="crmSearch"
        title="学员"
        placeholder="请输入微信昵称/电话/微信号"
        main-title="新建线索"
      />
      <div class="table-container">
        <!-- 列表选择操作 -->
        <c-r-m-new-table-manage
          ref="crmTableManage"
          :crm-type="crmType"
          :sort-data="sortData"
          @handle="handleHandle"
        ></c-r-m-new-table-manage>
        <el-table
          v-loading="loading"
          id="crm-table"
          :row-height="40"
          :data="list"
          border
          :max-height="tableHeight"
          :cell-class-name="cellClassName"
          :row-key="`${crmType}Id`"
          class="n-table--border"
          highlight-current-row
          style="width: 100%"
          @row-click="handleRowClick"
          @sort-change="sortChange"
          @header-dragend="handleHeaderDragend"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            show-overflow-tooltip
            reserve-selection
            type="selection"
            align="center"
            width="55"
          />
          <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :fixed="index == 0"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="fieldFormatter"
            sortable="custom"
            show-overflow-tooltip
          />
          <!-- <el-table-column label="关注" align="center" fixed="right" width="60">
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.star == 0 ? '添加关注' : '取消关注'"
              effect="dark"
              placement="top"
            >
              <i
                :class="{ active: scope.row.star != 0 }"
                class="wk wk-focus-on focus-icon"
                @click="toggleStar(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column> -->
          <el-table-column
            :resizable="false"
            fixed="right"
            width="40"
            prop="isRepetition"
          >
            <template slot="header">
              <field-set :crm-type="crmType" @change="setSave" />
            </template>
            <template slot-scope="scope">
              <span style="opacity:0">---</span>
            </template>
          </el-table-column>

          <!-- <wk-empty
          slot="empty"
          :props="{
            buttonTitle: '新建线索',

            showButton: saveAuth
          }"
          @click="createClick"
        /> -->
        </el-table>
        <div class="p-contianer">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size.sync="pageSize"
            :total="total"
            :pager-count="5"
            class="p-bar"
            background
            layout="prev, pager, next, sizes, total, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <leads-detail
      v-if="showDview"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"
      @hide-view="showDview = false"
    />

    <!-- 新建 -->
    <!-- <leads-create
      v-if="createShow"
      @close="createShow = false"
      @save-success="handleHandle"
    /> -->
    <c-r-m-all-create
      v-if="createShow"
      :crm-type="crmType"
      @close="createShow = false"
      @save-success="handleHandle"
    />
  </div>
</template>

<script>
import LeadsCreate from "./Create";
import LeadsDetail from "./Detail";
import TableMixin from "../mixins/Table";
import CRMAllCreate from "../components/CRMAllCreate";
export default {
  /** 学员管理 的 线索列表 */
  name: "LeadsIndex",
  components: {
    LeadsDetail,
    LeadsCreate,
    CRMAllCreate
  },
  mixins: [TableMixin],
  data() {
    return {
      crmType: "leads", // 类型
      inputContent: "", // 学员名称
      createShow: false, // 新建线索
      showDview: false, // 详情
      dupCheckShow: false // 查重
    };
  },

  computed: {
    menuItems() {
      const temp = [];

      if (this.crm && this.crm.leads) {
        temp.push({
          title: "线索管理",

          path: "leads",

          icon: require("@/assets/img/crm/leads.png")
        });
      }

      return temp;
    }
  },

  mounted() {
  },

  deactivated: function() {
    if (this.$refs.elMenu) {
      this.$refs.elMenu.activeIndex = this.crmType;
    }
  },

  methods: {
    /**
     * 左侧菜单选择
     */
    menuSelect(key, keyPath) {
      this.$emit("menu-select", key, keyPath);
    },

    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (
        column.property === "leadsName" ||
        column.property === "customerName"
      ) {
        return "can-visit--underline";
      } else {
        return this.statusClass(row, column, rowIndex, columnIndex)
      }
    },

    /**
     * 新建点击
     */
    createClick() {
      this.createShow = true;
    },
    inputChange() {},
    searchInput() {},
    // 查重
    duplicateCheck(temp) {
      this.dupCheckShow = temp;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";

.create-btn {
  background: #07bf50;
  border-color: #07bf50;
  border-radius: 2px;
  color: #fff;
}

.el-input {
  /deep/ .el-input-group__append {
    background-color: $xr-color-primary;
    border-color: $xr-color-primary;
    color: white;
  }
}

/deep/.table-option-view {
  display: flex;

  align-items: center;
}
</style>
